<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        * {
            font-size: 12px;
        }

        .layui-table-page {
            text-align: center;
        }

        .layui-icon {
            margin-top: 5px;
        }

        .layui-input-block .layui-icon {
            margin-top: 0px;
        }

        .layui-table-view {
            border: none;
            margin: 0;
        }

        .layui-table-tool {
            background-color: transparent;
            /*color: ;*/
        }

        .layui-panel {
            border-radius: 5px;
        }

        .fade-in-left {
            animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }

        @keyframes fade-in-left {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</head>

<body class="fade-in-left" style="padding: 8px">
<div class="layui-row">
    <div class="layui-col-md12">
        <div class="layui-panel">
            <table id="myAttendData" lay-filter="test"></table>
        </div>
    </div>
</div>

<script src="../static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="../static/layui/layui.js"></script>
<script !src="">
    $(function (){
        layui.use(['table', 'layer', 'laydate', 'form'], function () {
            let table = layui.table;
            let layer = layui.layer;
            let laydate = layui.laydate;
            let form = layui.form;

            table.render({
                elem: '#myAttendData',
                height: 400,
                url: 'myAttend',
                method: 'post',
                page: true,
                limits: [5, 10, 20],
                limit: 5,
                toolbar: true,
                defaultToolbar: ['filter', 'exports'],
                text: {
                    none: '你还没有参加过宴会哦'
                },
                title: '我出席的宴会',
                parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.length,
                        "data": res
                    }
                },
                done: function () {

                },
                cols: [[
                    {type: 'numbers', title: '序号',fixed: 'left'},
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field:'myAttendName',title: '我出席的宴会名'}
                    , {field: 'myAttendAddress', title: '宴会地点'}
                    , {field: 'costMoney', style:'color: goldenrod;',sort: true, title: '礼金'}
                    , {field: 'hostPeople', title: '举办人姓名'}
                    , {field: 'hostRealtionName', title: '关系'}
                ]]
            });
        });
    })
</script>
</body>
</html>
